<template>
  <div>
    <div v-for="(item, index) in tempValue" :key="index" class="mb-5">
      <image-select :url.sync="item.url" @change="change" />
      <v-icon>mdi-plus</v-icon>
      <v-icon>mdi-delete</v-icon>
    </div>
  </div>
</template>

<script>
import ImageSelect from './components/image-select'

export default {
  name: 'AttrH5ImageSrcList',
  components: {
    ImageSelect
  },
  props: {
    imageSrcList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tempValue: []
    }
  },
  watch: {
    imageSrc() {
      this.initData()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const list = []
      this.imageSrcList.forEach(item => {
        list.push({ url: item })
      })
      this.tempValue = list
    },
    getResultImageSrcList() {
      const list = []
      for (let i = 0, len = this.tempValue.length; i < len; i++) {
        list.push(this.tempValue[i].url)
      }
      return list
    },
    change() {
      this.$emit('update:imageSrcList', this.getResultImageSrcList())
    }
  }
}
</script>
